<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="js/socket-cc.js"></script>
		<script>
// 			var baseSocketUrl='ws://127.0.0.1:9581/chatsocket/';
			var baseHttpUrl='';
		</script>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<title>聊天室</title>
	</head>
	<body>
		<div id="loginbox">
	<div style="width:260px;margin:200px auto;">
		请先输入你在聊天室的昵称
		<br/>
		<br/>
		<input type="text" style="width:180px;" placeholder="请输入用户名" id="username" name="username" />
		<input type="button" style="width:50px;" value="提交" class="login_in"  />
	</div>
</div>
<div id="chatbox" style="display:none;">
	<div style="background:#3d3d3d;height: 28px; width: 100%;font-size:12px;">
		<div style="line-height: 28px;color:#fff;">
			<span style="text-align:left;margin-left:10px;">Websocket聊天室</span>
			<span style="float:right; margin-right:10px;"><span id="showusername"></span> |
			<a href="javascript:;" onclick="CHAT.logout()" style="color:#fff;">退出</a></span>
		</div>
	</div>
	<div id="doc">
		<div id="chat">
			<div id="message" class="message">
				<div id="onlinecount" style="background:#EFEFF4; font-size:12px; margin-top:10px; margin-left:10px; color:#666;">
				</div>
			</div>
			<div class="input-box">
				<div class="input">
					<input type="text" maxlength="140" placeholder="请输入聊天内容，按Ctrl提交" id="content" name="content">
				</div>
				<div class="input"><input type="text" placeholder="目标" id="target" /></div>
				<div class="action">
					<button type="button" id="mjr_send" >提交</button>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
<script>
	jQuery(function(){
		jQuery('.login_in').on('click',function(){
			var userCode=$('#username').val();
			$(this).attr('disabled',true);
			$.ajax({
				type:"post",
				url:'user/login',
				data:{'userCode':userCode},
				async:true,
				dataType:'json',
				success:function(data){
					console.log(data);
					if(data.status=='SUCCESS'){
						jQuery('#loginbox').css('display','none');
						jQuery('#chatbox').css('display','block');
						getMsg();
						console.log(data.userId);
						baseHttpUrl=data.httpBaseUrl;
						synccheck(data.userId,data.wsBaseUrl);
					}else{
						console.log(data);
					}
				}
			});
		});
		jQuery('#mjr_send').on('click',function(){
			submitForm();
		});
		jQuery('body').on('keyup',function(event){
			if(event.keyCode=='17'){
				submitForm();
			}
		});
		function submitForm(){
			var toSubmit=$('#content').val();
			var target=$('#target').val();
			console.log('需要发送的消息为:'+toSubmit);
			$.ajax({
				type:"post",
				url:baseHttpUrl+'user/sendMsg',
				async:true,
				data:{'msgBody':toSubmit,'target':target},
				dataType:'json',
				success:function(data){
					console.log(data);
					var from= 'me';
					var section=$('<section>');
					section.attr('class','user');
					var span=$('<span>').html(from);
					var divBody=$('<div>').html(toSubmit);
					section.append(span);
					section.append(divBody);
					$('#message').append(section);
					$('#content').val('');
				}
			});
		}
		function getMsg(){
			$.ajax({
				type:"post",
				url:baseHttpUrl+"user/getMsg",
				async:true,
				dataType:'json',
				success:function(data){
					console.log(data);
					var bodys=data.bodys;
					console.log('bodys=='+bodys+'    bodys==null:'+(bodys==null));
					if(bodys==null){
					}else{
						for(var i=0;i<bodys.length;i++){
							var recMsg= bodys[i];
							var from= recMsg.from;
							console.log(from);
							var body= recMsg.msgBody;
							var section=$('<section>');
							section.attr('class','service');
							var span=$('<span>').html(from);
							var divBody=$('<div>').html(body);
							section.append(span);
							section.append(divBody);
							$('#message').append(section);
						}
					}
				}
			});
		}
		var websocket = null;
		  function synccheck(userId,baseUrl) {
		 	//判断当前浏览器是否支持WebSocket
		 	if ('WebSocket' in window) {
		 		websocket = new WebSocket(baseUrl+"websocket/"+userId);
		 	} else {
		 		alert('Not support websocket')
		 	}

		 	//连接发生错误的回调方法
		 	websocket.onerror = function() {
		 		/*setMessageInnerHTML("error");*/
		 	};

		 	//连接成功建立的回调方法
		 	websocket.onopen = function(event) {
		 		/*setMessageInnerHTML("open");*/
		 	}

		 	//接收到消息的回调方法
		 	websocket.onmessage = function(event) {
		 		console.log(event);
		 		console.log(event.data);
		 		getMsg();
		 		/*setMessageInnerHTML(event.data);*/
		 	}

		 	//连接关闭的回调方法
		 	websocket.onclose = function() {
		 		setMessageInnerHTML("close");
		 	}

		 	//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
		 	/*window.onbeforeunload = function() {
		 		websocket.close();
		 	}*/

		 	//将消息显示在网页上
		 	/*function setMessageInnerHTML(innerHTML) {
		 		document.getElementById('message').innerHTML += innerHTML + '<br/>';
		 	}*/

		 	//关闭连接
		 	function closeWebSocket() {
		 		websocket.close();
		 	}
		 }
		  function send() {
		  	websocket.send(message);
		  }
		
	});
</script>	
</html>